<template>
	<view v-if="roomInfo" class="page page-room">
		<!-- 轮播图 -->
		<view class="room-banner">
			<uni-swiper-dot :info="banners" :current="bannerCurrent" mode="round" :dotsStyles="dotsStyles">
				<swiper class="room-swipe" :autoplay="true" :interval="3000" :circular="true" @change="swiperChange">
					<swiper-item class="room-swipe-item w100 h100" v-for="(item, index) in banners" :key="index">
						<view class="room-img w100 h100 bg-cover" :style="{backgroundImage: 'url(' + (imgPath + item) + ')'}"></view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="room-info">
			<view class="dt">{{roomInfo.name}}</view>
			<view class="dd">
				<view class="label">床&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：</view>
				<view>{{roomInfo.bed_type[0].name}} ({{roomInfo.bed_type[0].num}}张) </view>
			</view>
			<view class="dd">
				<view class="label">房间面积：</view>
				<view>{{roomInfo.size}} m²</view>
			</view>
			<view class="dd">
				<view class="label">人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数：</view>
				<view>{{roomInfo.max_persons}}&nbsp;(不可加床)</view>
			</view>
			<view class="dd">
				<view class="label">窗&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;户：</view>
				<view>{{roomInfo.window == 0 ? '无窗' : (roomInfo.window == 1 ? '有窗' : '部分有窗')}}</view>
			</view>
			<view class="dd">
				<view class="label">所在楼层：</view>
				<view>{{roomInfo.floor}}</view>
			</view>
			<view class="dd">
				<view class="label">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</view>
				<view>{{roomInfo.other_explain ? roomInfo.other_explain : '暂无'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgPath: this.$Config.http_static, // 图片头
				// 轮播图
				banners: [],
				bannerCurrent: 0,
				dotsStyles: {
					width: 6,
					height: 6,
					bottom: 15,
					border: '0 rgba(255,255,255,.4) solid',
					backgroundColor: 'rgba(255,255,255,.4)',
					selectedBackgroundColor: '#ffffff',
					selectedBorder: '0 #ffffff solid'
				},
				roomInfo: null
			}
		},
		onLoad (options) {
			// 酒店详情
			this.$Http({
				url: 'roomInfo',
				load: true,
				data: {
					room_id: options.id
				},
			}).then(res => {
				if (res.code == 1) {
					this.roomInfo = res.data
					this.banners = res.data.img_group.split(",")
				} else {
					uni.showToast({ title: res.msg, icon: none })
				}
			})
		},
		methods: {
			// 轮播图change
			swiperChange(e) {
				this.bannerCurrent = e.detail.current;
			},
		}
	}
</script>

<style lang="less">
	/* 房间详情 */
	.page-room{
		.room-swipe{width: 750rpx;height: 440rpx;}
		.room-info{
			padding: 0 30rpx;
			.dt{font-size: 32rpx;padding: 30rpx 0;border-bottom: 2rpx solid #f0f0f0;text-align: center;}
			.dd{
				font-size: 28rpx;padding-top: 40rpx;padding-left: 6rpx;display: flex;align-items: center;
				.label{color: #969696;}
			}
		}
	}
</style>
